<!-- 乡村医疗服务页面 -->
<template>
  <div class="medical">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="乡村医疗服务"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />

    <!-- 医院信息 -->
    <div class="hospital-info">
      <van-image
        width="100%"
        height="200"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        fit="cover"
      />
      <div class="info-content">
        <h2>乡村医疗协助平台</h2>
        <p>为全镇超过 2000 家乡镇医院提供服务，为乡村群众提供便捷的医疗服务，包括体检预约、线上问诊、健康档案管理等多项服务。</p>
      </div>
    </div>

    <!-- 服务功能区 -->
    <div class="service-grid">
      <van-grid :column-num="2" :gutter="10" :border="false">
        <van-grid-item>
          <div class="service-item">
            <van-icon name="clock" color="#1989fa" size="24" />
            <span>体检预约</span>
            <p>定期体检计划预约</p>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="service-item">
            <van-icon name="chat" color="#07c160" size="24" />
            <span>在线问诊</span>
            <p>专业医生在线诊疗</p>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="service-item">
            <van-icon name="records" color="#ff6b00" size="24" />
            <span>健康档案</span>
            <p>电子健康档案查询</p>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="service-item">
            <van-icon name="chart-trending-o" color="#ee0a24" size="24" />
            <span>体检报告</span>
            <p>在线查看体检报告</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 专家团队 -->
    <div class="doctor-team">
      <div class="section-title">专家团队</div>
      <div class="doctor-list">
        <div class="doctor-card" v-for="doctor in doctors" :key="doctor.id">
          <van-image
            round
            width="60"
            height="60"
            :src="doctor.avatar"
          />
          <div class="doctor-info">
            <h3>{{ doctor.name }}</h3>
            <p>{{ doctor.title }}</p>
            <van-button size="small" type="primary" block>立即咨询</van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务动态 -->
    <div class="service-news">
      <div class="section-title">服务动态</div>
      <van-cell-group inset>
        <van-cell v-for="news in newsList" :key="news.id" :title="news.title" :label="news.time" is-link />
      </van-cell-group>
    </div>

    <!-- 底部提示 -->
    <div class="bottom-tips">
      <van-divider>更多服务请上下拉查看</van-divider>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  NavBar as VanNavBar,
  Image as VanImage,
  Icon as VanIcon,
  Grid as VanGrid,
  GridItem as VanGridItem,
  Button as VanButton,
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Divider as VanDivider
} from 'vant'

const router = useRouter()

// 返回按钮点击事件
const onClickLeft = () => {
  router.back()
}

// 医生数据
const doctors = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师 | 内科专家',
    avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg'
  },
  {
    id: 2,
    name: '刘医生',
    title: '副主任医师 | 儿科专家',
    avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg'
  }
])

// 新闻列表
const newsList = ref([
  {
    id: 1,
    title: '免费义诊活动开展',
    time: '2024-01-20 09:30'
  },
  {
    id: 2,
    title: '健康讲座',
    time: '2024-01-22 14:30'
  }
])
</script>

<style lang="scss" scoped>
.medical {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  padding-bottom: 20px;
}

.hospital-info {
  background: #fff;
  margin-bottom: 12px;

  .info-content {
    padding: 16px;

    h2 {
      margin: 0 0 8px;
      font-size: 18px;
      color: #323233;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #969799;
      line-height: 1.5;
    }
  }
}

.service-grid {
  margin: 12px 0;
  background: #fff;
  padding: 16px;

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;

    span {
      margin: 8px 0;
      font-size: 14px;
      color: #323233;
    }

    p {
      margin: 0;
      font-size: 12px;
      color: #969799;
    }
  }
}

.doctor-team {
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #323233;
  }

  .doctor-list {
    .doctor-card {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f2f2f2;

      &:last-child {
        border-bottom: none;
      }

      .doctor-info {
        flex: 1;
        margin-left: 12px;

        h3 {
          margin: 0 0 4px;
          font-size: 16px;
          color: #323233;
        }

        p {
          margin: 0 0 8px;
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }
}

.service-news {
  background: #fff;
  padding: 16px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #323233;
  }
}

.bottom-tips {
  margin-top: 20px;
  padding: 0 16px;
}
</style> 